<template>
 <h2 style="text-align: center;">显示分页页面</h2>
 房型名称：<input type="text" v-model="form2.name" class="form-control">
 <button @click="Show2" class="btn btn-primary" >查询</button>
 <table class="table">
        <tr class="bg-primary">
        <td>房间名称</td>
        <td>售价</td>
        <td>面积</td>
        <td>可入住人数</td>
        <td>房型介绍</td>
        <td>是否加床</td>
        <td>是否含早</td>
        <td>状态</td>
        <td>操作</td>
    </tr>
    <tr v-for="item in showlist2" :key="item.hid">
        <td>{{item.hname}}</td>
        <td>{{item.hprice}}</td>
        <td>{{item.hmianji}}</td>
        <td>{{item.hnum}}</td>
        <td>{{item.hintroduce}}</td>
        <td>{{item.hbed?"不可加床":"免费加床"}}</td>
        <td>{{item.hbreakfast?"含早":"不含早"}}</td>
        <td>{{item.hupdown?"上架":"下架"}}</td>
        <td>
            <a href="javascript:void(0)" @click="del(item.hid)" >删除</a>
            <a href="javascript:void(0)" style="color: red;"  @click="upd(item.hid)" >修改</a>
        </td>
    </tr>
 </table>
 <table>
    <tr>
        <td>每页有{{form2.size}}条，一共{{form2.Count}}条，当前{{form2.index}}/{{form2.Page}}页</td>
        <td>
            <a href="javascript:void(0)" @click="showpage(1)">首页</a>
            <a href="javascript:void(0)" @click="showpage(form2.index-1)">上一页</a>
            <a href="javascript:void(0)" v-for="item in form2.Page" @click="showpage(item)">{{item}}</a>
            <a href="javascript:void(0)" @click="showpage(form2.index+1)">下一页</a>
            <a href="javascript:void(0)" @click="showpage(form2.Page)">尾页</a>
        </td>
        <td>
            <select v-model="form2.size" @click="Show2">
                <option :value="2">2条/页</option>
                <option :value="3">3条/页</option>
                <option :value="4">4条/页</option>
            </select>
        </td>
    </tr>
 </table>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import "bootstrap/dist/css/bootstrap.min.css"
import router from '@/router';

const upd = (hid: number) => {
    router.push("/updatelist?hid" + hid);
}

const del = (hid:number) => {
    if (confirm("确定要删除？")) {
        axios.post("https://localhost:7013/api/Hotel/del?id=" + hid).then(res => {
        if (res.data > 0) {
            alert("删除成功");
            Show2();
        }
        else {
            alert("删除失败");
            return;
        }
    })
    }
}

const showpage = (index:number) => {
    form2.index = index;
    Show2();
}


const form2 = reactive({
    index: 1,
    size: 2,
    Count: 0,
    Page: 0,
    name:"",
})
const showlist2 = ref([]);

const Show2 = () => {
    axios.get("https://localhost:7013/api/Hotel/Show",{
        params: {
                index: form2.index,
                size: form2.size,
                Count: form2.Count,
                Page: form2.Page,
                name:form2.name,
        }
    }).then(res => {
        showlist2.value = res.data.list;
        form2.Count = res.data.Count;
        form2.Page = res.data.Page;
    })
}


onMounted(() => {
    Show2();
})

</script>